<script setup>
import { ref } from 'vue'

// 表单
const formData = ref({
  username: 'demo',
  password: 'zh@hm#23',
  remember: true
})
const formRules = ref({
  username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

// 登录
const onFinish = (values) => {
  console.log(values)
  console.log('登录')
}
</script>

<template>
  <div class="login-container">
    <div class="logo"></div>
    <div class="form">
      <h3>智慧园区-登录</h3>
      <a-card class="login-card">
        <!-- 登录表单 -->
        <a-form
          :model="formData"
          :rules="formRules"
          autocomplete="off"
          layout="vertical"
          :hideRequiredMark="true"
          @finish="onFinish"
        >
          <a-form-item name="username" label="账号">
            <a-input v-model:value="formData.username" placeHolder="请输入账号"></a-input>
          </a-form-item>
          <a-form-item name="password" label="密码">
            <a-input-password
              v-model:value="formData.password"
              placeHolder="请输入密码"
            ></a-input-password>
          </a-form-item>
          <a-form-item name="remember">
            <a-checkbox v-model:checked="formData.remember">记住我</a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" block>登录</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<style lang="less">
.login-container {
  display: flex;
  height: 100vh;
  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login.svg) no-repeat top / cover;
    border-top-right-radius: 46px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .ant-card {
      padding-left: 170px;
      padding-bottom: 100px;
      width: 600px;
      border: none;
    }
    h3 {
      padding-left: 190px;
      font-size: 26px;
      padding-bottom: 60px;
    }
  }
}
</style>
